<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; charset=utf-8" />
<title></title>
<style>
div{
	width: 100px;
	height:50px;
	background: red;
	margin:10px;
}
</style>
<script>
window.onload=function(){
	var aDiv=document.getElementsByTagName('div');
	
	          for(var i=0;i<aDiv.length;i++)
             { aDiv[i].timer=null;
             	
             	aDiv[i].onmouseover=function(){
                       change(this,400);
		           };
             	aDiv[i].onmouseout=function(){
				       change(this,100);	
		           };
             }	
};
function change(obj,tag){
	clearInterval(obj.timer);
	obj.timer=setInterval(function(){
		var speed=(tag-obj.offsetWidth)/6;
	speed=speed>0?Math.ceil(speed):Math.floor(speed);
        if(obj.offsetWidth==tag)
        {
        	clearInterval(obj.timer);
        }
        else{
        	obj.style.width=obj.offsetWidth+speed+'px';
        }
	},30);
};
</script>
</head>
<body>
<div>
</div>
<div>
</div>
<div>
</div>
</body>
</html>
